<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>模拟实现一个vue</title>
  </head>
  <body>
    <div id="app">
      <!-- <h1>插值表达式</h1>
      <h4>{{msg}}</h4>
      <h4>{{count}}</h4>
      <h1>v-text</h1>
      <h4 v-text="msg"></h4>
      <h1>v-model</h1>
      <input type="text" v-model="msg">
      <input type="text" v-model="count"> -->
      <p>Using v-html directive: <span v-html="rawHtml"></span></p>
      <button v-on:click="hello">v-on:click形式调用方法</button>
      <button @click="hello">利用@简写形式调用方法</button>
      <button v-on:click="alert(1)">v-on:click直接绑定js代码</button>
    </div>
  </body>
  <script src="./dep.js"></script>
  <script src="./watcher.js"></script>
  <script src="./compiler.js"></script>
  <script src="./observer.js"></script>
  <script src="./vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello Vue',
        count: 100,
        person:{
          name: 'hh'
        },
        rawHtml:'<span style="color: red">This should be red.</span>'
      },
      methods: {
        hello(){
          alert('hello vue')
        }
      }
    })
    // vm.msg = {newMsg:'新msg'}
  </script>
</html>